
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mega Able bootstrap admin template by Phoenixcoded</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Gradient Able Bootstrap admin template made using Bootstrap 4 and it has huge amount of ready made feature, UI components, pages which completely fulfills any dashboard needs." />
<meta name="keywords" content="bootstrap, bootstrap admin template, admin theme, admin dashboard, dashboard template, admin template, responsive" />
<meta name="author" content="Phoenixcoded" />

<link rel="icon" href="../files/assets/images/favicon.ico" type="image/x-icon">


<link rel="stylesheet" href="../files/assets/pages/waves/css/waves.min.css" type="text/css" media="all">

<link rel="stylesheet" type="text/css" href="../files/bower_components/bootstrap/css/bootstrap.min.css">

<link rel="stylesheet" href="../files/assets/pages/waves/css/waves.min.css" type="text/css" media="all">

<link rel="stylesheet" type="text/css" href="../files/assets/icon/themify-icons/themify-icons.css">

<link rel="stylesheet" type="text/css" href="../files/assets/icon/icofont/css/icofont.css">

<link rel="stylesheet" type="text/css" href="../files/assets/icon/font-awesome/css/font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="../files/assets/css/style.css">
<link rel="stylesheet" type="text/css" href="../files/assets/css/jquery.mCustomScrollbar.css">
</head>
<body>

<div class="theme-loader">
<div class="loader-track">
<div class="preloader-wrapper">
<div class="spinner-layer spinner-blue">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-yellow">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-green">
 <div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>

<div id="pcoded" class="pcoded">
<div class="pcoded-overlay-box"></div>
<div class="pcoded-container navbar-wrapper">
<nav class="navbar header-navbar pcoded-header">
<div class="navbar-wrapper">
<div class="navbar-logo">
<a class="mobile-menu waves-effect waves-light" id="mobile-collapse" href="#!">
<i class="ti-menu"></i>
</a>
<div class="mobile-search waves-effect waves-light">
<div class="header-search">
<div class="main-search morphsearch-search">
<div class="input-group">
<span class="input-group-prepend search-close"><i class="ti-close input-group-text"></i></span>
<input type="text" class="form-control" placeholder="Enter Keyword">
<span class="input-group-append search-btn"><i class="ti-search input-group-text"></i></span>
</div>
</div>
</div>
</div>
<a href="index.html">
<img class="img-fluid" src="../files/assets/images/logo.png" alt="Theme-Logo" />
</a>
<a class="mobile-options waves-effect waves-light">
<i class="ti-more"></i>
</a>
</div>
<div class="navbar-container container-fluid">
<ul class="nav-left">
<li>
<div class="sidebar_toggle"><a href="javascript:void(0)"><i class="ti-menu"></i></a></div>
</li>
<li class="header-search">
<div class="main-search morphsearch-search">
<div class="input-group">
<span class="input-group-prepend search-close"><i class="ti-close input-group-text"></i></span>
<input type="text" class="form-control" placeholder="Enter Keyword">
<span class="input-group-append search-btn"><i class="ti-search input-group-text"></i></span>
</div>
</div>
</li>
<li>
<a href="#!" onclick="javascript:toggleFullScreen()" class="waves-effect waves-light">
<i class="ti-fullscreen"></i>
</a>
</li>
</ul>
<ul class="nav-right">
<li class="header-notification">
<a href="#!" class="waves-effect waves-light">
<i class="ti-bell"></i>
<span class="badge bg-c-red"></span>
</a>
<ul class="show-notification">
<li>
<h6>Notifications</h6>
 <label class="label label-danger">New</label>
</li>
<li class="waves-effect waves-light">
<div class="media">
<img class="d-flex align-self-center img-radius" src="../files/assets/images/avatar-2.jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="notification-user">John Doe</h5>
<p class="notification-msg">Lorem ipsum dolor sit amet, consectetuer elit.</p>
<span class="notification-time">30 minutes ago</span>
</div>
</div>
</li>
<li class="waves-effect waves-light">
<div class="media">
<img class="d-flex align-self-center img-radius" src="../files/assets/images/avatar-4.jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="notification-user">Joseph William</h5>
<p class="notification-msg">Lorem ipsum dolor sit amet, consectetuer elit.</p>
<span class="notification-time">30 minutes ago</span>
</div>
</div>
</li>
<li class="waves-effect waves-light">
<div class="media">
<img class="d-flex align-self-center img-radius" src="../files/assets/images/avatar-3.jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="notification-user">Sara Soudein</h5>
<p class="notification-msg">Lorem ipsum dolor sit amet, consectetuer elit.</p>
<span class="notification-time">30 minutes ago</span>
</div>
</div>
</li>
</ul>
</li>
<li class="">
<a href="#!" class="displayChatbox waves-effect waves-light">
<i class="ti-comments"></i>
<span class="badge bg-c-green"></span>
</a>
</li>
<li class="user-profile header-notification">
<a href="#!" class="waves-effect waves-light">
<img src="../files/assets/images/avatar-4.jpg" class="img-radius" alt="User-Profile-Image">
<span>John Doe</span>
<i class="ti-angle-down"></i>
</a>
<ul class="show-notification profile-notification">
<li class="waves-effect waves-light">
<a href="#!">
<i class="ti-settings"></i> Settings
</a>
</li>
<li class="waves-effect waves-light">
<a href="user-profile.html">
<i class="ti-user"></i> Profile
</a>
</li>
<li class="waves-effect waves-light">
<a href="email-inbox.html">
<i class="ti-email"></i> My Messages
</a>
</li>
<li class="waves-effect waves-light">
<a href="auth-lock-screen.html">
<i class="ti-lock"></i> Lock Screen
</a>
</li>
<li class="waves-effect waves-light">
<a href="auth-normal-sign-in.html">
<i class="ti-layout-sidebar-left"></i> Logout
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

<div id="sidebar" class="users p-chat-user showChat">
<div class="had-container">
<div class="card card_main p-fixed users-main">
<div class="user-box">
<div class="chat-search-box">
<a class="back_friendlist">
<i class="fa fa-chevron-left"></i>
</a>
<div class="right-icon-control">
<form class="form-material">
<div class="form-group form-primary">
<input type="text" name="footer-email" class="form-control" id="search-friends" required="">
<span class="form-bar"></span>
<label class="float-label"><i class="fa fa-search m-r-10"></i>Search Friend</label>
</div>
</form>
</div>
</div>
<div class="main-friend-list">
<div class="media userlist-box waves-effect waves-light" data-id="1" data-status="online" data-username="Josephin Doe" data-toggle="tooltip" data-placement="left" title="Josephin Doe">
<a class="media-left" href="#!">
<img class="media-object img-radius img-radius" src="../files/assets/images/avatar-3.jpg" alt="Generic placeholder image ">
<div class="live-status bg-success"></div>
</a>
<div class="media-body">
<div class="f-13 chat-header">Josephin Doe</div>
</div>
</div>
<div class="media userlist-box waves-effect waves-light" data-id="2" data-status="online" data-username="Lary Doe" data-toggle="tooltip" data-placement="left" title="Lary Doe">
<a class="media-left" href="#!">
<img class="media-object img-radius" src="../files/assets/images/avatar-2.jpg" alt="Generic placeholder image">
<div class="live-status bg-success"></div>
</a>
<div class="media-body">
<div class="f-13 chat-header">Lary Doe</div>
 </div>
</div>
<div class="media userlist-box waves-effect waves-light" data-id="3" data-status="online" data-username="Alice" data-toggle="tooltip" data-placement="left" title="Alice">
<a class="media-left" href="#!">
<img class="media-object img-radius" src="../files/assets/images/avatar-4.jpg" alt="Generic placeholder image">
<div class="live-status bg-success"></div>
</a>
<div class="media-body">
<div class="f-13 chat-header">Alice</div>
</div>
</div>
<div class="media userlist-box waves-effect waves-light" data-id="4" data-status="online" data-username="Alia" data-toggle="tooltip" data-placement="left" title="Alia">
<a class="media-left" href="#!">
<img class="media-object img-radius" src="../files/assets/images/avatar-3.jpg" alt="Generic placeholder image">
<div class="live-status bg-success"></div>
</a>
<div class="media-body">
<div class="f-13 chat-header">Alia</div>
</div>
</div>
<div class="media userlist-box waves-effect waves-light" data-id="5" data-status="online" data-username="Suzen" data-toggle="tooltip" data-placement="left" title="Suzen">
<a class="media-left" href="#!">
<img class="media-object img-radius" src="../files/assets/images/avatar-2.jpg" alt="Generic placeholder image">
<div class="live-status bg-success"></div>
</a>
<div class="media-body">
<div class="f-13 chat-header">Suzen</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="showChat_inner">
<div class="media chat-inner-header">
<a class="back_chatBox">
<i class="fa fa-chevron-left"></i> Josephin Doe
</a>
</div>
<div class="media chat-messages">
<a class="media-left photo-table" href="#!">
<img class="media-object img-radius img-radius m-t-5" src="../files/assets/images/avatar-3.jpg" alt="Generic placeholder image">
</a>
<div class="media-body chat-menu-content">
<div class="">
<p class="chat-cont">I'm just looking around. Will you tell me something about yourself?</p>
<p class="chat-time">8:20 a.m.</p>
</div>
</div>
</div>
<div class="media chat-messages">
<div class="media-body chat-menu-reply">
<div class="">
<p class="chat-cont">I'm just looking around. Will you tell me something about yourself?</p>
<p class="chat-time">8:20 a.m.</p>
</div>
</div>
<div class="media-right photo-table">
<a href="#!">
<img class="media-object img-radius img-radius m-t-5" src="../files/assets/images/avatar-4.jpg" alt="Generic placeholder image">
</a>
</div>
</div>
<div class="chat-reply-box">
<div class="right-icon-control">
<form class="form-material">
<div class="form-group form-primary">
<input type="text" name="footer-email" class="form-control" required="">
<span class="form-bar"></span>
<label class="float-label"><i class="fa fa-search m-r-10"></i>Share Your Thoughts</label>
</div>
</form>
<div class="form-icon ">
<button class="btn btn-success btn-icon  waves-effect waves-light">
<i class="fa fa-paper-plane "></i>
</button>
</div>
</div>
</div>
</div>

<div class="pcoded-main-container">
<div class="pcoded-wrapper">
<nav class="pcoded-navbar">
<div class="sidebar_toggle"><a href="#"><i class="icon-close icons"></i></a></div>
<div class="pcoded-inner-navbar main-menu">
<div class="">
<div class="main-menu-header">
<img class="img-80 img-radius" src="../files/assets/images/avatar-4.jpg" alt="User-Profile-Image">
<div class="user-details">
<span id="more-details">John Doe<i class="fa fa-caret-down"></i></span>
</div>
</div>
<div class="main-menu-content">
<ul>
<li class="more-details">
<a href="user-profile.html"><i class="ti-user"></i>View Profile</a>
<a href="#!"><i class="ti-settings"></i>Settings</a>
<a href="auth-normal-sign-in.html"><i class="ti-layout-sidebar-left"></i>Logout</a>
</li>
</ul>
</div>
</div>
<div class="p-15 p-b-0">
<form class="form-material">
<div class="form-group form-primary">
<input type="text" name="footer-email" class="form-control" required="">
<span class="form-bar"></span>
<label class="float-label"><i class="fa fa-search m-r-10"></i>Search Friend</label>
</div>
</form>
</div>
<div class="pcoded-navigation-label">Navigation</div>
<ul class="pcoded-item pcoded-left-item">
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-home"></i><b>D</b></span>
<span class="pcoded-mtext">Dashboard</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
 <a href="index.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Default</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="dashboard-ecommerce.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Ecommerce</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="dashboard-crm.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">CRM</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dashboard-analytics.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Analytics</span>
<span class="pcoded-badge label label-info ">NEW</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dashboard-project.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Project</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-layout"></i><b>P</b></span>
<span class="pcoded-mtext">Page layouts</span>
<span class="pcoded-badge label label-warning">NEW</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-pie-chart"></i></span>
<span class="pcoded-mtext">Vertical</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
 <li class=" ">
<a href="menu-static.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-chart"></i></span>
<span class="pcoded-mtext">Static Layout</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="menu-header-fixed.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-chart"></i></span>
<span class="pcoded-mtext">Header Fixed</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="menu-compact.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-chart"></i></span>
<span class="pcoded-mtext">Compact</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="menu-sidebar.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-chart"></i></span>
<span class="pcoded-mtext">Sidebar Fixed</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class=" pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-pie-chart"></i></span>
<span class="pcoded-mtext">Horizontal</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="menu-horizontal-static.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-chart"></i></span>
<span class="pcoded-mtext">Static Layout</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="menu-horizontal-fixed.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-chart"></i></span>
 <span class="pcoded-mtext">Fixed layout</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="menu-horizontal-icon.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-chart"></i></span>
<span class="pcoded-mtext">Static With Icon</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="menu-horizontal-icon-fixed.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-chart"></i></span>
<span class="pcoded-mtext">Fixed With Icon</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class=" ">
<a href="menu-bottom.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-pie-chart"></i></span>
<span class="pcoded-mtext">Bottom Menu</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="box-layout.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-pie-chart"></i></span>
<span class="pcoded-mtext">Box Layout</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="menu-rtl.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-pie-chart"></i></span>
<span class="pcoded-mtext">RTL</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="">
<a href="navbar-light.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-layout-cta-right"></i><b>N</b></span>
<span class="pcoded-mtext">Navigation</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
 <span class="pcoded-micon"><i class="ti-view-grid"></i><b>W</b></span>
<span class="pcoded-mtext">Widget</span>
<span class="pcoded-badge label label-danger">100+</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="widget-statistic.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Statistic</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="widget-data.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Data</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="widget-chart.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Chart Widget</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="widget-chart-advance.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Advance Widgets</span>
<span class="pcoded-badge label label-info">25+</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
</ul>
<div class="pcoded-navigation-label">UI Element</div>
<ul class="pcoded-item pcoded-left-item">
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-layout-grid2-alt"></i><b>BC</b></span>
<span class="pcoded-mtext">Basic</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="alert.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Alert</span>
<span class="pcoded-mcaret"></span>
</a>
 </li>
<li class=" ">
<a href="breadcrumb.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Breadcrumbs</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="button.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Button</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="box-shadow.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Box-Shadow</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="accordion.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Accordion</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="generic-class.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Generic Class</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="tabs.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Tabs</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="color.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Color</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="label-badge.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Label Badge</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="progress-bar.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Progress Bar</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="preloader.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Pre-Loader</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="list.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">List</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="tooltip.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Tooltip And Popover</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="typography.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Typography</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="other.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Other</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-crown"></i><b>AC</b></span>
<span class="pcoded-mtext">Advance</span>
 <span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="draggable.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Draggable</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="bs-grid.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Grid Stack</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="light-box.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Light Box</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="modal.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Modal</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="notification.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Notifications</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="notify.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">PNOTIFY</span>
<span class="pcoded-badge label label-info">NEW</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="rating.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Rating</span>
<span class="pcoded-mcaret"></span>
</a>
 </li>
<li class=" ">
<a href="range-slider.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Range Slider</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="slider.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Slider</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="syntax-highlighter.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Syntax Highlighter</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="tour.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Tour</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="treeview.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Tree View</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="nestable.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Nestable</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="toolbar.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Toolbar</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="x-editable.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">X-Editable</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-gift"></i><b>EC</b></span>
<span class="pcoded-mtext">Extra</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="session-timeout.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Session Timeout</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="session-idle-timeout.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Session Idle Timeout</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="offline.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Offline</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class=" ">
<a href="animation.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-reload rotate-refresh"></i><b>A</b></span>
<span class="pcoded-mtext">Animations</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="sticky.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-layers-alt"></i><b>S</b></span>
<span class="pcoded-mtext">Sticky Notes</span>
<span class="pcoded-badge label label-danger">HOT</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-star"></i><b>I</b></span>
<span class="pcoded-mtext">Icons</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="icon-font-awesome.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Font Awesome</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="icon-themify.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Themify</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="icon-simple-line.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Simple Line Icon</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="icon-ion.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Ion Icon</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="icon-material-design.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Material Design</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="icon-icofonts.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Ico Fonts</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="icon-weather.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Weather Icon</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="icon-typicons.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Typicons</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="icon-flags.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Flags</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
</ul>
<div class="pcoded-navigation-label">Forms</div>
<ul class="pcoded-item pcoded-left-item">
<li class="pcoded-hasmenu active pcoded-trigger">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-layers"></i><b>FC</b></span>
<span class="pcoded-mtext">Form</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="active">
<a href="form-elements-component.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Components</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="form-elements-add-on.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Add-On</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="form-elements-advance.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Advance</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="form-validation.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Validation</span>
 <span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class=" ">
<a href="form-picker.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-pencil-alt"></i><b>FP</b></span>
<span class="pcoded-mtext">Form Picker</span>
<span class="pcoded-badge label label-warning">NEW</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="form-select.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-shortcode"></i><b>FS</b></span>
<span class="pcoded-mtext">Form Select</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="form-masking.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-write"></i><b>FM</b></span>
<span class="pcoded-mtext">Form Masking</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="form-wizard.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-archive"></i><b>F</b></span>
<span class="pcoded-mtext">Form Wizard</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-receipt"></i><b>R</b></span>
<span class="pcoded-mtext">Ready To Use</span>
<span class="pcoded-badge label label-danger">HOT</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="ready-cloned-elements-form.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Cloned Elements Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-currency-form.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Currency Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-form-booking.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Booking Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-form-booking-multi-steps.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Booking Multi Steps</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-form-comment.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Comment Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-form-contact.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Contact Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-job-application-form.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Job Application Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-js-addition-form.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">JS Addition Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-login-form.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Login Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
 <li class=" ">
<a href="ready-popup-modal-form.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Popup Modal Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-registration-form.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Registration Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-review-form.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Review Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-subscribe-form.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Subscribe Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-suggestion-form.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Suggestion Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-tabs-form.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Tabs Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
</ul>
<div class="pcoded-navigation-label">Tables</div>
<ul class="pcoded-item pcoded-left-item">
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-receipt"></i><b>B</b></span>
<span class="pcoded-mtext">Bootstrap Table</span>
<span class="pcoded-mcaret"></span>
 </a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="bs-basic-table.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Basic Table</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="bs-table-sizing.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Sizing Table</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="bs-table-border.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Border Table</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="bs-table-styling.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Styling Table</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-widgetized"></i><b>DT</b></span>
<span class="pcoded-mtext">Data Table</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="dt-basic.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Basic Initialization</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-advance.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Advance Initialization</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
 <li class=" ">
<a href="dt-styling.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Styling</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-api.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">API</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-ajax.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Ajax</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-server-side.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Server Side</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-plugin.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Plug-In</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-data-sources.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Data Sources</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-loop"></i><b>D</b></span>
<span class="pcoded-mtext">DT Extensions</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="dt-ext-autofill.html" class="waves-effect waves-dark">
 <span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">AutoFill</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Button</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="dt-ext-basic-buttons.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Basic Button</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-ext-buttons-html-5-data-export.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Data Export</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class=" ">
<a href="dt-ext-col-reorder.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Col Reorder</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-ext-fixed-columns.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Fixed Columns</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-ext-fixed-header.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Fixed Header</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
 <li class=" ">
<a href="dt-ext-key-table.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Key Table</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-ext-responsive.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Responsive</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-ext-row-reorder.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Row Reorder</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-ext-scroller.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Scroller</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-ext-select.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Select Table</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class=" ">
<a href="foo-table.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-view-list-alt"></i><b>F</b></span>
<span class="pcoded-mtext">FooTable</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-view-list"></i><b>HT</b></span>
<span class="pcoded-mtext">Handson Table</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="handson-appearance.html" class="waves-effect waves-dark">
 <span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Appearance</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="handson-data-operation.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Data Operation</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="handson-rows-cols.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Rows Columns</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="handson-columns-only.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Columns Only</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="handson-cell-features.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Cell Features</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="handson-cell-types.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Cell Types</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="handson-integrations.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Integrations</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="handson-rows-only.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Rows Only</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="handson-utilities.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Utilities</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="">
<a href="editable-table.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-write"></i><b>E</b></span>
<span class="pcoded-mtext">Editable Table</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
<div class="pcoded-navigation-label">Chart And Maps</div>
<ul class="pcoded-item pcoded-left-item">
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-bar-chart-alt"></i><b>C</b></span>
<span class="pcoded-mtext">Charts</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="chart-google.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Google Chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="chart-echart.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Echarts</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="chart-chartjs.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">ChartJs</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="chart-list.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">List Chart</span>
 <span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="chart-float.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Float Chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="chart-knob.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Knob chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="chart-morris.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Morris Chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="chart-nvd3.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Nvd3 Chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="chart-peity.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Peity Chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="chart-radial.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Radial Chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="chart-rickshaw.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Rickshaw Chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
 <a href="chart-sparkline.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Sparkline Chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="chart-c3.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">C3 Chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-map-alt"></i><b>M</b></span>
<span class="pcoded-mtext">Maps</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="map-google.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Google Maps</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="map-vector.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Vector Maps</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="map-api.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Google Map Search API</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="location.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Location</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="">
<a href="../files/extra-pages/landingpage/index.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-mobile"></i><b>LP</b></span>
<span class="pcoded-mtext">Landing Page</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
<div class="pcoded-navigation-label">Pages</div>
<ul class="pcoded-item pcoded-left-item">
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-id-badge"></i><b>A</b></span>
<span class="pcoded-mtext">Authentication</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Login</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="auth-normal-sign-in.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Simple</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="auth-normal-sign-in-header-footer.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Header &amp; Footer</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="auth-sign-in-social.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Social</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="auth-sign-in-social-header-footer.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Social With Header &amp; Footer</span>
 <span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Registration</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="auth-sign-up.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Simple</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="auth-sign-up-header-footer.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Header &amp; Footer</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="auth-sign-up-social.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Social</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="auth-sign-up-social-header-footer.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Social With Header &amp; Footer</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="">
<a href="auth-multi-step-sign-up.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Multi Step Registration</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="auth-reset-password.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Forgot Password</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="auth-lock-screen.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Lock Screen</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="auth-modal.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Modal</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-settings"></i><b>M</b></span>
<span class="pcoded-mtext">Maintenance</span>
<span class="pcoded-mcaret"></span>
 </a>
<ul class="pcoded-submenu">
<li class="">
<a href="error.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Error</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="comming-soon.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Comming Soon</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="offline-ui.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Offline UI</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-user"></i><b>UP</b></span>
<span class="pcoded-mtext">User Profile</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="timeline.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Timeline</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="timeline-social.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Timeline Social</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="user-profile.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">User Profile</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
 <a href="user-card.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">User Card</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-shopping-cart"></i><b>E</b></span>
<span class="pcoded-mtext">E-Commerce</span>
<span class="pcoded-badge label label-danger">NEW</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="product.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Product</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="product-list.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Product List</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="product-edit.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Product Edit</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="product-detail.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Product Detail</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="product-cart.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Product Card</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="product-payment.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Credit Card Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-email"></i><b>E</b></span>
<span class="pcoded-mtext">Email</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="email-compose.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Compose Email</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="email-inbox.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Inbox</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="email-read.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Read Mail</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-email"></i></span>
<span class="pcoded-mtext">Email Template</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="../files/extra-pages/email-templates/email-welcome.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Welcome Email</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="../files/extra-pages/email-templates/email-password.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Reset Password</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="../files/extra-pages/email-templates/email-newsletter.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Newsletter Email</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="../files/extra-pages/email-templates/email-launch.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">App Launch</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="../files/extra-pages/email-templates/email-activation.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Activation Code</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="pcoded-navigation-label">App</div>
<ul class="pcoded-item pcoded-left-item">
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-dribbble"></i><b>S</b></span>
<span class="pcoded-mtext">Social</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="fb-wall.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Wall</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="message.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Messages</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-check-box"></i><b>T</b></span>
<span class="pcoded-mtext">Task</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="task-list.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Task List</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="task-board.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Task Board</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="task-detail.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Task Detail</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="issue-list.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Issue List</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-notepad"></i><b>T</b></span>
<span class="pcoded-mtext">To-Do</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="todo.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">To-Do</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="notes.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Notes</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-gallery"></i><b>G</b></span>
<span class="pcoded-mtext">Gallery</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="gallery-grid.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Gallery-Grid</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="gallery-masonry.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Masonry Gallery</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="gallery-advance.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Advance Gallery</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-search"></i><b>S</b></span>
<span class="pcoded-mtext">Search</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="search-result.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Simple Search</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="search-result2.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Grouping Search</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-medall-alt"></i><b>JS</b></span>
<span class="pcoded-mtext">Job Search</span>
<span class="pcoded-badge label label-danger">NEW</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="job-card-view.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Card View</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="job-details.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Job Detailed</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="job-find.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Job Find</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="job-panel-view.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Job Panel View</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
</ul>
<div class="pcoded-navigation-label">Extension</div>
<ul class="pcoded-item pcoded-left-item">
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-pencil-alt"></i><b>E</b></span>
<span class="pcoded-mtext">Editor</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="ck-editor.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">CK-Editor</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="wysiwyg-editor.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">WYSIWYG Editor</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="ace-editor.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Ace Editor</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="long-press-editor.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Long Press Editor</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-layout-media-right"></i><b>I</b></span>
<span class="pcoded-mtext">Invoice</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="invoice.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Invoice</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="invoice-summary.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Invoice Summary</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="invoice-list.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Invoice List</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-calendar"></i><b>EC</b></span>
<span class="pcoded-mtext">Event Calendar</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="event-full-calender.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Full Calendar</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="event-clndr.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">CLNDER</span>
<span class="pcoded-badge label label-info">NEW</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="">
<a href="image-crop.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-cut"></i><b>IC</b></span>
<span class="pcoded-mtext">Image Cropper</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="file-upload.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-cloud-up"></i><b>FU</b></span>
<span class="pcoded-mtext">File Upload</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="change-loges.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-list"></i><b>CL</b></span>
<span class="pcoded-mtext">Change Loges</span>
 <span class="pcoded-badge label label-warning">1.0</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
<div class="pcoded-navigation-label">Other</div>
<ul class="pcoded-item pcoded-left-item">
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-direction-alt"></i><b>M</b></span>
<span class="pcoded-mtext">Menu Levels</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Menu Level 2.1</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-direction-alt"></i></span>
<span class="pcoded-mtext">Menu Level 2.2</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-direction-alt"></i></span>
<span class="pcoded-mtext">Menu Level 3.1</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Menu Level 2.3</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="">
<a href="javascript:void(0)" class="disabled waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-na"></i><b>D</b></span>
<span class="pcoded-mtext">Disabled Menu</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="sample-page.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-layout-sidebar-left"></i><b>S</b></span>
<span class="pcoded-mtext">Sample Page</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
<div class="pcoded-navigation-label">Support</div>
<ul class="pcoded-item pcoded-left-item">
<li class="">
<a href="#" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-file"></i><b>D</b></span>
<span class="pcoded-mtext">Documentation</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="#" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-layout-list-post"></i><b>SI</b></span>
<span class="pcoded-mtext">Need Support ?</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</div>
</nav>
<div class="pcoded-content">

<div class="page-header">
<div class="page-block">
<div class="row align-items-center">
<div class="col-md-8">
<div class="page-header-title">
<h5 class="m-b-10">Basic Form Inputs</h5>
<p class="m-b-0">Lorem Ipsum is simply dummy text of the printing</p>
</div>
</div>
<div class="col-md-4">
<ul class="breadcrumb">
<li class="breadcrumb-item">
<a href="index.html"> <i class="fa fa-home"></i> </a>
</li>
<li class="breadcrumb-item"><a href="#!">Form Components</a>
</li>
<li class="breadcrumb-item"><a href="#!">Basic Form Inputs</a>
</li>
</ul>
</div>
</div>
</div>
</div>

<div class="pcoded-inner-content">

<div class="main-body">
<div class="page-wrapper">

<div class="page-body">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5>Material Form Inputs</h5>
 
</div>
<div class="card-block">
<form class="form-material">
<div class="form-group form-default">
<input type="text" name="footer-email" class="form-control" required="">
<span class="form-bar"></span>
<label class="float-label">Username</label>
</div>
<div class="form-group form-default">
<input type="text" name="footer-email" class="form-control" required="">
<span class="form-bar"></span>
<label class="float-label">Email (<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9dcc1d8f9ded4d8d0d597dad6d4">[email&#160;protected]</a>)</label>
</div>
<div class="form-group form-default">
<input type="password" name="footer-email" class="form-control" required="">
<span class="form-bar"></span>
<label class="float-label">Password</label>
</div>
<div class="form-group form-default">
<input type="text" name="footer-email" class="form-control" required="" value="My value">
<span class="form-bar"></span>
<label class="float-label">Predefine value</label>
</div>
<div class="form-group form-default">
<input type="text" name="footer-email" class="form-control" required="" disabled>
<span class="form-bar"></span>
<label class="float-label">Disabled</label>
</div>
<div class="form-group form-default">
<input type="text" name="footer-email" class="form-control" required="" maxlength="6">
<span class="form-bar"></span>
<label class="float-label">Max length 6 char</label>
</div>
<div class="form-group form-default">
<textarea class="form-control" required=""></textarea>
<span class="form-bar"></span>
<label class="float-label">Text area Input</label>
</div>
</form>
</div>
 </div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5>Material Form Inputs With Static Label</h5>

</div>
<div class="card-block">
<form class="form-material">
<div class="form-group form-default form-static-label">
<input type="text" name="footer-email" class="form-control" placeholder="Enter User Name" required="">
<span class="form-bar"></span>
<label class="float-label">Username</label>
</div>
<div class="form-group form-default form-static-label">
<input type="text" name="footer-email" class="form-control" placeholder="Enter Email" required="">
<span class="form-bar"></span>
<label class="float-label">Email (<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b0adb495b2b8b4bcb9fbb6bab8">[email&#160;protected]</a>)</label>
</div>
<div class="form-group form-default form-static-label">
<input type="password" name="footer-email" class="form-control" placeholder="Enter Password" required="">
<span class="form-bar"></span>
<label class="float-label">Password</label>
</div>
<div class="form-group form-default form-static-label">
<input type="text" name="footer-email" class="form-control" required="" placeholder="Pre define value" value="My value">
<span class="form-bar"></span>
<label class="float-label">Predefine value</label>
</div>
<div class="form-group form-default form-static-label">
<input type="text" name="footer-email" class="form-control" required="" placeholder="disabled Input" disabled>
<span class="form-bar"></span>
<label class="float-label">Disabled</label>
</div>
<div class="form-group form-default form-static-label">
<input type="text" name="footer-email" class="form-control" required="" maxlength="6" placeholder="Enter only 6 char">
<span class="form-bar"></span>
<label class="float-label">Max length 6 char</label>
</div>
<div class="form-group form-default form-static-label">
<textarea class="form-control" required="">Enter Text hear</textarea>
<span class="form-bar"></span>
<label class="float-label">Text area Input</label>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5>Colored Input</h5>
</div>
<div class="card-block">
<form class="form-material">
<div class="form-group form-default">
<input type="text" name="footer-email" class="form-control" required="">
<span class="form-bar"></span>
<label class="float-label">form-default</label>
</div>
<div class="form-group form-primary">
<input type="text" name="footer-email" class="form-control" required="">
<span class="form-bar"></span>
<label class="float-label">form-primary</label>
</div>
<div class="form-group form-success">
<input type="text" name="footer-email" class="form-control" required="">
<span class="form-bar"></span>
<label class="float-label">form-success</label>
</div>
<div class="form-group form-danger">
<input type="text" name="footer-email" class="form-control" required="">
<span class="form-bar"></span>
<label class="float-label">form-danger</label>
</div>
<div class="form-group form-warning">
<input type="text" name="footer-email" class="form-control" required="">
<span class="form-bar"></span>
<label class="float-label">form-warning</label>
</div>
 <div class="form-group form-info">
<input type="text" name="footer-email" class="form-control" required="">
<span class="form-bar"></span>
<label class="float-label">form-info</label>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5>Colored Input With Static Label</h5>
</div>
<div class="card-block">
<form class="form-material">
<div class="form-group form-default form-static-label">
<input type="text" name="footer-email" class="form-control" required="">
<span class="form-bar"></span>
<label class="float-label">form-default</label>
</div>
<div class="form-group form-primary form-static-label">
<input type="text" name="footer-email" class="form-control" required="">
<span class="form-bar"></span>
<label class="float-label">form-primary</label>
</div>
<div class="form-group form-success form-static-label">
<input type="text" name="footer-email" class="form-control" required="">
<span class="form-bar"></span>
<label class="float-label">form-success</label>
</div>
<div class="form-group form-danger form-static-label">
<input type="text" name="footer-email" class="form-control" required="">
<span class="form-bar"></span>
<label class="float-label">form-danger</label>
</div>
<div class="form-group form-warning form-static-label">
<input type="text" name="footer-email" class="form-control" required="">
<span class="form-bar"></span>
<label class="float-label">form-warning</label>
</div>
<div class="form-group form-info form-static-label">
 <input type="text" name="footer-email" class="form-control" required="">
<span class="form-bar"></span>
<label class="float-label">form-info</label>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">

<div class="card">
<div class="card-header">
<h5>Basic Form Inputs</h5>
<span>Add class of <code>.form-control</code> with <code>&lt;input&gt;</code> tag</span>
</div>
<div class="card-block">
<h4 class="sub-title">Basic Inputs</h4>
<form>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Simple Input</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Placeholder</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Type your title in Placeholder">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="Password input">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Read only</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="You can't change me" readonly>
</div>
</div>
 <div class="form-group row">
<label class="col-sm-2 col-form-label">Disable Input</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Disabled text" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Predefine
Input</label>
<div class="col-sm-10">
<input type="text" class="form-control" value="Enter yout content after me">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Select Box</label>
<div class="col-sm-10">
<select name="select" class="form-control">
<option value="opt1">Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
<option value="opt4">Type 4</option>
<option value="opt5">Type 5</option>
<option value="opt6">Type 6</option>
<option value="opt7">Type 7</option>
<option value="opt8">Type 8</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Round Input</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-round" placeholder=".form-control-round">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Maximum
Length</label>
 <div class="col-sm-10">
<input type="text" class="form-control" placeholder="Content must be in 6 characters" maxlength="6">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Disable
Autocomplete</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Autocomplete Off" autocomplete="off">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Static Text</label>
<div class="col-sm-10">
<div class="form-control-static">Hello !... This is
static text
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Color</label>
<div class="col-sm-10">
<input type="color" class="form-control">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Upload File</label>
<div class="col-sm-10">
<input type="file" class="form-control">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Textarea</label>
<div class="col-sm-10">
<textarea rows="5" cols="5" class="form-control" placeholder="Default textarea"></textarea> 
</div>
</div>
</form>
<div class="row">
<div class="col-sm-6">
<h4 class="sub-title">Input Sizes</h4>
<form>
<div class="form-group row">
<div class="col-sm-12">
<input type="text" class="form-control form-control-lg" placeholder=".form-control-lg">
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<input type="text" class="form-control" placeholder=".form-control">
</div>
</div>
<div class="form-group row">
<div class="col-sm-8">
<input type="text" class="form-control form-control-sm" placeholder=".form-control-sm">
</div>
</div>
</form>
</div>
<div class="col-sm-6 mobile-inputs">
<h4 class="sub-title">Color Inputs</h4>
<form>
<div class="form-group">
<input type="text" class="form-control form-control-primary" placeholder=".form-control-primary">
</div>
<div class="form-group row">
<div class="col-sm-6">
 <input type="text" class="form-control form-control-warning" placeholder=".form-control-warning">
</div>
<div class="col-sm-6">
<input type="text" class="form-control form-control-default" placeholder=".form-control-default">
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<input type="text" class="form-control form-control-danger" placeholder=".form-control-danger">
</div>
<div class="col-sm-6">
<input type="text" class="form-control form-control-success" placeholder=".form-control-success">
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<input type="text" class="form-control form-control-inverse" placeholder=".form-control-inverse">
</div>
<div class="col-sm-6">
<input type="text" class="form-control form-control-info" placeholder=".form-control-info">
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-6 mobile-inputs">
<h4 class="sub-title">Text-color</h4>
<form>
<div class="form-group">
<input type="text" class="form-control form-txt-primary" placeholder=".form-txt-primary">
</div>
<div class="form-group row">
<div class="col-sm-6">
<input type="text" class="form-control form-txt-warning" placeholder=".form-txt-warning">
</div>
<div class="col-sm-6">
<input type="text" class="form-control form-txt-default" placeholder=".form-txt-default">
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<input type="text" class="form-control form-txt-danger" placeholder=".form-txt-danger">
</div>
<div class="col-sm-6">
<input type="text" class="form-control form-txt-success" placeholder=".form-txt-success">
</div>
</div>
<div class="row">
<div class="col-sm-6">
<input type="text" class="form-control form-txt-inverse" placeholder=".form-txt-inverse">
</div>
 <div class="col-sm-6">
<input type="text" class="form-control form-txt-info" placeholder=".form-txt-info">
</div>
</div>
</form>
</div>
<div class="col-sm-6 mobile-inputs">
<h4 class="sub-title">Background-color</h4>
<form>
<div class="form-group">
<input type="text" class="form-control form-bg-primary" placeholder=".form-bg-primary">
</div>
<div class="form-group row">
<div class="col-sm-6">
<input type="text" class="form-control form-bg-warning" placeholder=".form-bg-warning">
</div>
<div class="col-sm-6">
<input type="text" class="form-control form-bg-default" placeholder=".form-bg-default">
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<input type="text" class="form-control form-bg-danger" placeholder=".form-bg-danger">
</div>
<div class="col-sm-6">
<input type="text" class="form-control form-bg-success" placeholder=".form-bg-success">
 </div>
</div>
<div class="row">
<div class="col-sm-6">
<input type="text" class="form-control form-bg-inverse" placeholder=".form-bg-inverse">
</div>
<div class="col-sm-6">
<input type="text" class="form-control form-bg-info" placeholder=".form-bg-info">
</div>
</div>
</form>
</div>
</div>
</div>
</div>


<div class="card">
<div class="card-header">
<h5>Input Grid</h5>
<span>Add class of <code>.form-control</code> with <code>&lt;input&gt;</code> tag</span>
</div>
<div class="card-block">
<h4 class="sub-title">Basic Inputs</h4>
<form>
<div class="form-group row">
<div class="col-sm-1">
<input type="text" class="form-control" placeholder="col-sm-1">
</div>
<div class="col-sm-11">
<input type="text" class="form-control" placeholder="col-sm-11">
</div>
</div>
<div class="form-group row">
<div class="col-sm-2">
<input type="text" class="form-control" placeholder="col-sm-2">
</div>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="col-sm-10">
</div>
</div>
<div class="form-group row">
<div class="col-sm-3">
<input type="text" class="form-control" placeholder="col-sm-3">
</div>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="col-sm-9">
</div>
</div>
<div class="form-group row">
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="col-sm-4">
</div>
<div class="col-sm-8">
<input type="text" class="form-control" placeholder="col-sm-8">
</div>
</div>
<div class="form-group row">
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="col-sm-5">
</div>
<div class="col-sm-7">
<input type="text" class="form-control" placeholder="col-sm-7">
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="col-sm-6">
 </div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="col-sm-6">
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<input type="text" class="form-control" placeholder="col-sm-12">
</div>
</div>
</form>
<h4 class="sub-title">Flex Inputs</h4>
<form>
<div class="form-group row">
<div class="col">
<input type="text" class="form-control" placeholder="col">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="col-sm-4">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="col">
</div>
</div>
<div class="form-group row">
<div class="col">
<input type="text" class="form-control" placeholder="col">
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="col-sm-6">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="col">
</div>
</div>
<div class="form-group row">
<div class="col-sm-8">
 <input type="text" class="form-control" placeholder="col-sm-8">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="col">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="col">
</div>
</div>
<div class="form-group row">
<div class="col">
<input type="text" class="form-control" placeholder="col">
</div>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="col-sm-10">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="col">
</div>
</div>
</form>
</div>
</div>


<div class="card">
<div class="card-header">
<h5>Input Validation</h5>
<span>Add class of <code>.form-control</code> with <code>&lt;input&gt;</code> tag</span>
</div>
<div class="card-block">
<h4 class="sub-title">Input Validation</h4>
<div class="form-group has-success row">
<div class="col-sm-2">
<label class="col-form-label" for="inputSuccess1">Input with
success</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control form-control-success" id="inputSuccess1">
<div class="col-form-label">Success! You've done it.</div>
</div>
</div>
<div class="form-group has-warning row">
<div class="col-sm-2">
<label class="col-form-label" for="inputWarning1">Input with
warning</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control form-control-warning" id="inputWarning1">
<div class="col-form-label">Shucks, check the formatting of that
and try again.
</div>
</div>
</div>
<div class="form-group has-danger row">
<div class="col-sm-2">
<label class="col-form-label" for="inputDanger1">Input with
danger</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control form-control-danger" id="inputDanger1">
<div class="col-form-label">Sorry, that username's taken. Try
another?
</div>
</div>
</div>
</div>
</div>


<div class="card">
<div class="card-header">
<h5>Input Alignment</h5>
<span>Add class of <code>.form-control</code> with <code>&lt;input&gt;</code> tag</span>
</div>
<div class="card-block">
<form>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Normal Text</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-normal" placeholder=".form-control-normal">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Bold Text</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-bold" placeholder=".form-control-bold">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Capitalize Text</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-capitalize" placeholder=".form-control-capitalize">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Uppercase Text</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-uppercase" placeholder=".form-control-uppercase">
</div>
</div>
<div class="form-group row">
 <label class="col-sm-2 col-form-label">Lowercase Text</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-lowercase" placeholder=".form-control-lowercase">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Varient Text</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-variant" placeholder=".form-control-variant">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Left-Align Text</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-left" placeholder=".form-control-left">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Center-Align Text</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-center" placeholder=".form-control-center">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Right-Align Text</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-right" placeholder=".form-control-right">
</div>
 </div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">RTL Text</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-rtl" placeholder=".form-control-rtl">
</div>
</div>
</form>
</div>
</div>

</div>
</div>
</div>

</div>
</div>

<div id="styleSelector">
</div>
</div>
</div>
</div>
</div>
</div>
</div>


<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="../files/bower_components/jquery/js/jquery.min.js"></script>
<script type="text/javascript" src="../files/bower_components/jquery-ui/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../files/bower_components/popper.js/js/popper.min.js"></script>
<script type="text/javascript" src="../files/bower_components/bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript" src="../files/bower_components/jquery-slimscroll/js/jquery.slimscroll.js"></script>

<script src="../files/assets/pages/waves/js/waves.min.js"></script>

<script type="text/javascript" src="../files/bower_components/modernizr/js/modernizr.js"></script>
<script type="text/javascript" src="../files/bower_components/modernizr/js/css-scrollbars.js"></script>

<script src="../files/assets/js/pcoded.min.js"></script>
<script src="../files/assets/js/vertical/vertical-layout.min.js"></script>
<script src="../files/assets/js/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript" src="../files/assets/js/script.js"></script>
</body>
</html>
